<template>
  <h1>双向绑定命令</h1>
  {{info}}
  <input type="text" :value="info">
  <!-- 双向绑定 : 将页面与下方的变量进行绑定的html上
  1) info变量的数据会显示在绑定的html上
  2) 页面html元素的值改变,绑定的info变量值也会随之改变
  -->
  <input type="text" v-model ="info">
  <hr>
  <input type="text"  placeholder="请输入用户名" v-model = "user.username" >
  <input type="password"  placeholder="请输入密码" v-model = "user.password" >
  <br>性别：
  <input type="radio" name="gender" value="1" v-model = "user.gender">男
  <input type="radio" name="gender" value="0" v-model = "user.gender">女
  <button @click="f()">登录</button>
</template>

<script setup>
import {ref} from "vue";

const info = ref('hello')
const user = ref({
  username:'tom',
  password:'123',
  gender:1
})
const f = ()=>{
  console.log(user)
  console.log(" 用户名 : " + user.value.username)
  console.log(" 密码 : " + user.value.password)
  console.log(" 性别 : " + user.value.gender)
}

</script>


<style scoped>

</style>